import React from 'react';
// 引入验证码组件
import Captcha from '@/components/Captcha';
import { Button, Form, Input, Space, message } from 'antd';
// 引入图标组件
import { LockOutlined, UserOutlined, KeyOutlined } from '@ant-design/icons';
// 引入状态hook
import { useState } from 'react';
// 导入两个两个hook 用来操作redux 
import { useSelector, useDispatch } from 'react-redux';
// 导入路由的相关的hook
import { useHistory } from 'react-router-dom'
// 导入 hook 钩子 ref 
import { useRef } from 'react'
// 导入接口请求
import { verifyCaptcha, sendPhoneMsg } from '@/api/login'


//  短信登录
const MobileLogin = () => {
    const [key, setKey] = useState('');
    let [time, setTime] = useState(10); // 定义的倒计时的初始值
    // 创建dispatch 方法
    const dispatch = useDispatch();
    // 登录验证成功执行的函数
    const onFinish = (values) => {
        //获取参数 
        console.log('value', values);
        // 调用短信登录接口, 成功后, 跳转到首页
    };
    // 登录验证失败执行的函数
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    // 创建ref 对象
    const ref1 = useRef();
    // 获取form 表单实例(antd form 表单提供的方法)
    const [form] = Form.useForm();
    // 定义一个savekey 函数
    const saveKey = (key) => {
        // console.log('父组件savekey执行', key);
        setKey(key)
    }

    let timer = null;
    // 定义发送验证码函数
    const sendmessageFn = () => {
        // 01: 点击发送验证码, 首先需要验证 手机号和图形验证码是否填写
        form.validateFields(['mobile', 'captcha']).then(res => {
            // 表示验证通过
            console.log('验证通过', res); // {mobile: '11', captcha: '22'}
            // 02: 校验图形验证码是否输入正确
            verifyCaptcha({
                key: key,
                captcha: res.captcha
            }).then(res1 => {
                console.log('res1', res1);
                if (res1.data.errNo == 0) {
                    // 表示图形验证码验证成功
                    //03: 发送短信验证码
                    // sendPhoneMsg({
                    //     token: res1.data.context.token,
                    //     mobile: res.mobile,
                    //     type: 0
                    // }).then(res2 => {
                    //     console.log(res2);
                    // })

                    // 假设短信验证码发送成功了, 那么 需要 开始倒计时
                    timer = setInterval(() => {
                        time--
                        if (time == 0) {
                            time = 10
                            clearInterval(timer) // 清除定时器
                        }
                        setTime(time)
                        // console.log(time);
                    }, 1000)

                } else {
                    // 表示图形验证码验证失败
                    message.error(res1.data.errText, 1, () => {
                        ref1.current.loadashFn();
                        form.setFieldsValue({
                            mobile: '',
                            captcha: ''
                        })
                    })
                }
            })
        }).catch(err => {
            // 表示验证失败
            console.log('验证失败', err);
        })

    }
    return (
        <div>
            <Form
                name="basic"
                wrapperCol={{
                    span: 24,
                }}
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
                size='large'
                form={form}
            >
                <Form.Item
                    name="mobile"
                    rules={[
                        {
                            required: true,
                            message: '请输入手机号!',
                        },
                    ]}
                >
                    <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="手机号" />
                </Form.Item>
                <Space>
                    <Form.Item
                        name="captcha"
                        rules={[
                            {
                                required: true,
                                message: '请输入图形验证码!',
                            },
                        ]}
                    >
                        <Input prefix={<KeyOutlined className="site-form-item-icon" />} placeholder="图形验证码" />
                        {/* 验证码组件 */}
                        {/* <Captcha h={38} saveKey={saveKey} ref={ref1}></Captcha> */}
                    </Form.Item>
                    <Form.Item>
                        {/* 验证码组件 */}
                        <Captcha h={38} saveKey={saveKey} ref={ref1}></Captcha>
                    </Form.Item>
                </Space>
                <Space>
                    <Form.Item
                        name="code"
                        rules={[
                            {
                                required: true,
                                message: '请输入短信验证码!',
                            },
                        ]}
                    >

                        <Input prefix={<LockOutlined className="site-form-item-icon" />} placeholder="短信验证码" />
                    </Form.Item>
                    <Form.Item>
                        {/* 发送验证码按钮 */}
                        <Button disabled={time != 10} onClick={sendmessageFn}>{time != 10 ? `倒计时${time}秒` : '发送验证码'}</Button>
                    </Form.Item>
                </Space>
                <Form.Item
                    wrapperCol={{
                        span: 24,
                    }}
                >
                    <Button type="primary" htmlType="submit" block>
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
}

export default MobileLogin;
